<style lang="scss" scoped>
.container {
  font-size: 16px;
  font-family: 'Microsoft YaHei';
  color: #555;
}

.imagearea {
  width: 96%;
  padding: 8px 0;
  height: 195px;
  overflow: hidden;
  margin: auto
}

.imagearea img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

.text {
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.utitle {
  padding-top: 10px;
  width: 100%;
  height: 60px;
  text-align: center;
  background: #fff;
}

.mtitle {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.ztitle {
  font-size: 15px;
  color: #999
}
</style>

<template>
  <div ref="container" class="container hasTabbar">

    <div class="utitle">
      <div class="mtitle">客户风采</div>
      <div class="ztitle">custom</div>
    </div>

    <template v-for="(item, index) in customList">
      <div v-if="index % 2 == 0" class="mienlist">
        <div class="imagearea">
          <img :src="fileApi + item.picUrl" />
        </div>
        <div class="text">{{ item.title }}</div>
      </div>
      <div v-if="index % 2 != 0" class="mienlist">
        <div class="imagearea">
          <img :src="fileApi + item.picUrl" />
        </div>
        <div class="text">{{ item.title }}</div>
      </div>
    </template>

    <back-top selector=".container"></back-top>
    <Loading :isShow="loading"></Loading>
    <Tabbar></Tabbar>

  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar';
import Loading from '@/components/Loading';
import BackTop from '@/components/BackTop';
import mixin from '@/mixin/index';
import { fileUrl, listCustomPage } from '../../api/custom';

export default {
  name: 'custom',
  components: {
    Tabbar,
    BackTop,
    Loading,
  },
  mixins: [mixin],
  data() {
    return {
      fileApi: fileUrl,
      loading: true,
      customList: [],
      pageIndex: 1,
      pageSize: 10,
      isCompleted: false,
    }
  },
  beforeMount() {
    this.pageCustom();
  },
  mounted() {
    this.bindScroll('container', () => {
      if (!this.isCompleted) {
        this.pageIndex += 1;
        this.pageCustom();
      }
    });
  },
  methods: {

    async pageCustom(clear = false) {
      try {
        this.loading = true;
        const { code, message, data } = await listCustomPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        });
        if (code == 200) {
          if (data.records.length !== 0) {
            if (clear) {
              this.customList = [];
            }
            this.customList.push(...data.records);
          } else {
            this.isCompleted = true;
          }
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

  },
}
</script>